<template>
  <div class="login">
    <!-- 头部logo -->
    <div class="top-logo">
      <div class="logo">
        <img :src="logo"
             alt=""
             style="width:100%">
      </div>
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit"
              @failed="onFailed">
      <!-- TODO:用户名 -->
      <van-field v-model="form.user_phone"
                 left-icon="phone-o"
                 name="user_phone"
                 placeholder="请输入手机号"
                 :rules="telRules" />

      <!-- TODO:密码 -->
      <van-field v-model="form.password"
                 left-icon="lock"
                 name="password"
                 placeholder="请输入6-12密码"
                 :rules="passRules" />

      <!-- TODO:提交按钮 -->
      <div style="width:70%">
        <van-button round
                    block
                    native-type="submit"
                    class="login-btn">注册</van-button>
      </div>
    </van-form>
    <!-- 其他登录 -->
      <div class="login-other">
      <span @click="$router.push('/login')">已有账号</span>
     <!--  <span>注册</span> -->
    </div>
  </div>
</template>

<script>
import logo from '@/assets/image/log.png'
import { register } from '@/api/main'
export default {
  data() {
    return {
      logo: logo,
      form: {
        user_phone: '',
        password: ''
      },
      telRules: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'onBlur'
        },
        {
          // 自定义校验规则
          validator: value => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)
          },
          message: '请输入正确格式的手机号码',
          trigger: 'onBlur'
        }
      ],
      passRules: [
        {
          validator(val) {
            return /^[\w]{6,12}$/.test(val)
          }
        }
      ]
    }
  },
  methods: {
    async onSubmit() {
      console.log(this.form)
      let res = await register(this.form)
      console.log(res)
      if (res.status == 200) {
        this.$router.push('/login')
      }
    },
    onFailed() {}
  }
}
</script>

<style scoped lang="less">
/* logo */
.top-logo {
  display: flex;
  height: 6.8667rem;
  background-color: #e87b61;
  .logo {
    margin: auto;
    width: 40%;
  }
}
/* 表单 */
::v-deep.van-form {
  width: 100%;   // 375px   37.5rem 
  display: flex;
  flex-direction: column;
  margin-top: 1.0667rem;   
  align-items: center;
  .van-field {
    width: 80%;
    padding: 0.5867rem 0 0.2667rem;
    border-bottom: 1px solid #ccc;
    font-size: 0.4267rem;
    /* TODO:左侧图标 */
    .van-field__left-icon {
      padding-right: 0.2667rem;
      font-size: 1.0667rem;
      .van-icon {
        font-size: 0.64rem;
      }
    }
  }
  .login-btn {
    margin-top: 1.7333rem;
    font-size: 0.5333rem;
    letter-spacing: 0.4rem;
    text-indent: 0.4rem;
    color: #fff;
    background-color: #e87b61;
  }
}
/* 其他登录 */
.login-other {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding: 0 5% 0.6667rem;
  justify-content: space-between;
  font-size: 0.4267rem;
  box-sizing: border-box;
}
</style>